<template>
  <div id="app">
    <header class="app-head" v-if="$route.meta.showNav">
      <section>
        <div class="leftheader">
          <!-- <img src="../src/assets/wyylogo.jpg"  alt="" /> -->
          <i class="iconfont icon-wangyiyunyinyuemusic1193417easyiconnet"></i>
          <h2>网易云音乐</h2>
        </div>
        <div class="rightheader">
          <button>下载app</button>
        </div>
      </section>
    </header>

    <nav v-if="$route.meta.showNav">
      <div>
        <router-link to="/">推荐音乐</router-link>

        <router-link to="/hot">热歌榜</router-link>
        <router-link to="/search">搜索</router-link>
      </div>
    </nav>
    <router-view
      @songId="playsong = $event"
      @item-id="itemId = $event"
      :playsong="playsong"
      :played="played"
      @cardSong="playsong = $event"
      :cardsongs="cardsongs"
      @NewSong="
        NewSongList = $event;
        cardSongList = null;
      "
      @Card-Song="
        cardSongList = $event;
        NewSongList = null;
      "
      @hotSong="
        playsong = $event.item;
        NewSongList = $event.HotSong;
      "
      @singer-song="playsong=$event"
    />

    <audio
      style="display:none"
      controls
      autoplay
      ref="audio"
      :src="
        playsong
          ? `https://music.163.com/song/media/outer/url?id=${playsong.id}.mp3`
          : ''
      "
      @play="played = true"
      @pause="played = false"
      @durationchange="duration = $event.target.duration"
      @timeupdate="durationchange = $event.target.currentTime"
    ></audio>
    <transition
      name="custom-classes-transition"
      enter-active-class="animated fadeInUp"
      leave-active-class="animated fadeOutDown"
    >
      <PlayTime
        :playsong="playsong"
        @playing="$refs.audio.play()"
        @paused="$refs.audio.pause()"
        :played="played"
        :duration="duration"
        :durationchange="durationchange"
        @play-bar="playpages = true"
        @showMyPlaylist="showMyPlaylist = true"
      ></PlayTime>
    </transition>
     <transition
      name="custom-classes-transition"
      enter-active-class="animated fadeInUp"
      leave-active-class="animated fadeOutDown"
    >
    <PlayPage
      v-if="playpages"
      @playpage="playpages = false"
      :playsong="playsong"
      :duration="duration"
      :durationchange="durationchange"
      @updata:currenTime="$refs.audio.currentTime = $event"
      :played="played"
      @playing="$refs.audio.play()"
      @paused="$refs.audio.pause()"
      @Show-List="showMyPlaylist = true"
      @pre-song="preSong"
      @next-song="nextSong"
    />
     </transition>
      <transition
      name="custom-classes-transition"
      enter-active-class="animated fadeInUp"
      leave-active-class="animated fadeOutDown"
    >
    <PlayList
      v-if="showMyPlaylist"
      @closePlay="showMyPlaylist = false"
      :playsong="playsong"
      :NewSongList="NewSongList"
      @songId="playsong = $event"
      :cardSongList="cardSongList"
    />
     </transition>
  </div>
</template>
<script>
import PlayTime from "@/components/PlayTime.vue";
import PlayPage from "@/components/PlayPage.vue";
import PlayList from "@/components/PlayList.vue";
export default {
  data: function () {
    return {
      playsong: null,
      played: false,
      duration: 0,
      durationchange: 0,
      playpages: false,
      itemId: null,
      cardsongs: null,
      showMyPlaylist: false,
      NewSongList: null,
      cardSongList: null,
    };
  },
  components: {
    PlayTime,
    PlayPage,
    PlayList,
  },
  methods: {
    preSong: function () {
      var currenindex;
      var index;
      if (this.NewSongList) {
        currenindex = this.NewSongList.findIndex((o) => {
          return o.id == this.playsong.id;
        });
        console.log(currenindex);
        index =
          currenindex === this.NewSongList.length - 1 ? 0 : currenindex - 1;
        this.playsong = this.NewSongList[index];
      } else {
        currenindex = this.cardSongList.findIndex((o) => {
          return o.id == this.playsong.id;
        });
        console.log(currenindex);
        index =
          currenindex === this.cardSongList.length - 1 ? 0 : currenindex - 1;
        this.playsong = this.cardSongList[index];
      }
    },
    nextSong: function () {
      var currenindex;
      var index;
      if (this.NewSongList) {
        currenindex = this.NewSongList.findIndex((o) => {
          return o.id == this.playsong.id;
        });
        console.log(currenindex);
        index =
          currenindex === this.NewSongList.length - 1 ? 0 : currenindex + 1;
        this.playsong = this.NewSongList[index];
      } else {
        currenindex = this.cardSongList.findIndex((o) => {
          return o.id == this.playsong.id;
        });
        console.log(currenindex);
        index =
          currenindex === this.cardSongList.length - 1 ? 0 : currenindex + 1;
        this.playsong = this.cardSongList[index];
      }
    },
  },
};
</script>

<style lang="less" >
.animated {
  animation-duration: 1s;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  color: #2c3e50;
}
body {
  margin: 0;
  padding: 0;
}
.app-head {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1;
}
header section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  background: #d43c33;

  .leftheader,
  .rightheader {
    display: flex;
    align-content: center;
    height: 35px;
    align-content: center;
    margin: 0 10px;

    i {
      width: 26px;
      height: 26px;
      font-size: 22px;
      color: #e6e6e6;
    }
    h2 {
      font-size: 18px;
      color: white;
      line-height: 35px;
      margin: 0;
      letter-spacing: 5px;
      margin-left: 5px;
    }

    button {
      border-radius: 20px;
      background: white;
      color: #d43c33;
    }
  }
}

nav {
  position: fixed;
  z-index: 1;
  top: 80px;
  height: 42px;
  width: 100%;
  background: #ffffff;

  div {
    display: flex;
    justify-content: space-evenly;
    box-shadow: 0 -2px 0 inset #e6e6e6;
  }
  a {
    text-align: center;
    font-size: 16px;
    color: #2c3e50;
    text-decoration: none;
    padding: 8px 0;

    &.router-link-exact-active {
      color: #d43c33;
      border-bottom: 2px solid #d43c33;
    }
  }
}

audio {
  position: fixed;
  right: 0;
  top: 300px;
}
</style>
